<template>
    <div>
        <div v-if="$route.path == '/memberInfo' || $route.path == '/cashierMemberInfo'" class="flex" v-loading="loading">
            <div class="grid-content bg-purple">
                <div class="vs-details-box">
                    <el-form>
                        <div class="big-x">
                            <div class="tiltou">
                                <div class="image-avatar">
                                    <img v-if="vipInfo.avatar" :src="vipInfo.avatar" alt="" />
                                    <img v-else
                                        src="https://api.yiweika.net/uploads/2021/12/06/srchttp___pic2.zhimg.com_50_v2-6b648675305dc2c9130d6db9bfe61f24_hd.jpgreferhttp___pic2.zhimg.jpg"
                                        alt="" />
                                </div>
                                <div class="nsex">
                                    <div>
                                        <span>{{ vipInfo.realname }}</span>
                                        <span class="vs-m-l-10">
                                            {{ vipInfo.gender | typeGender }}
                                        </span>
                                    </div>
                                    <span class="vs-m-t-8 vs-m-b-5">{{ vipInfo.phone }}</span>
                                    <el-tag size="small" v-if="vipInfo.vip">{{
                                        vipInfo.vip.title || "散客"
                                    }}</el-tag>
                                    <el-tag v-else size="small">散客</el-tag>
                                </div>
                            </div>
                            <div class="userFuwu">
                                <div class="balance">
                                    <div class="mon">￥{{ vipInfo.balance }}</div>
                                    <div class="monk">账户余额</div>
                                </div>
                                <div class="balance">
                                    <div class="mon">{{ vipInfo.integral }}</div>
                                    <div class="monk">积分余额</div>
                                </div>
                                <div class="balance">
                                    <span class="mon">{{ vipInfo.service_number }}</span>
                                    <span class="monk">赠送服务次数</span>
                                </div>
                            </div>
                        </div>
                        <div class="btn-m">
                            <el-row class="button-v">
                                <el-button round size="mini"
                                    @click="utils.goUrl('/setUserRecharge?title=充值&id=' + id)">充值</el-button>
                                <el-button type="primary" round size="mini"
                                    @click="utils.goUrl('/integralChage?title=积分变更&id=' + id)">积分变更</el-button>
                                <el-button type="success" round size="mini" @click="isShowCishu = true">赠送服务次数</el-button>
                                <el-button @click="clickSetUser" type="mini" round size="small">修改会员信息</el-button>
                                <el-button type="warning" round size="mini" @click="getSaveLog">
                                    变更记录
                                </el-button>
                                <el-button type="danger" round size="mini" @click="isShowTuita = true">退卡</el-button>
                            </el-row>
                        </div>
                        <el-dialog title="该会员卡是否要退卡" :visible.sync="isShowTuita" width="30%" center>
                            <div class="tuiKa">注：该会员退卡后不可恢复，建议谨慎操作！</div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="isShowTuita = false">取 消</el-button>
                                <el-button :loading="isBtn" type="primary" @click="returnCard()">确认</el-button>
                            </span>
                        </el-dialog>
                        <el-dialog :visible.sync="isShowCishu" width="500px" center>
                            <div style="text-align: center">该会员本月已赠送{{ vipInfo.service_count || 0 }}次，是否需要赠送次数？</div>
                            <br />
                            <template>
                                <el-input-number style="margin: 30px 152px" v-model="service_number"
                                    :min="1"></el-input-number>
                            </template>

                            <span slot="footer" class="dialog-footer">
                                <el-button @click="isShowCishu = false">取 消</el-button>
                                <el-button :loading="isBtn" type="primary" @click="giveNumber()">确认</el-button>
                            </span>
                        </el-dialog>
                        <el-dialog title="会员信息变更记录" :visible.sync="isShowBiangeng" width="600px" center v-loading="isChange">
                            <div v-if="userChange && userChange.update_time">
                                <div>变更时间：{{ userChange.update_time }}</div>
                                <br />
                                <el-descriptions v-if="userChange.change" :column="2" title="变更内容：">
                                    <template v-for="(item, key) in utils.data.userChange">
                                        <el-descriptions-item :key="key" :label="utils.data.userChange[key]"
                                            v-if="utils.useOptionChain(userChange.change, key) != null">
                                            {{ utils.textfile(userChange.change[key][0], key,vipList) }}
                                            =>
                                            {{ utils.textfile(userChange.change[key][1], key,vipList) }}
                                        </el-descriptions-item>
                                    </template>
                                    <!-- <el-descriptions-item v-if="utils.useOptionChain(userChange, 'change.realname[0]')"
                                                                            label="变更前">
                                                                            {{ userChange.change.realname[0] }}
                                                                        </el-descriptions-item>
                                                                        <el-descriptions-item v-if="utils.useOptionChain(userChange, 'change.realname[0]')"
                                                                            label="姓名：">
                                                                            {{ userChange.change.realname[1] }}
                                                                        </el-descriptions-item>

                                                                        <el-descriptions-item v-if="utils.useOptionChain(userChange, 'change.phone[0]')"
                                                                            label="变更前">
                                                                            {{ userChange.change.phone[0] }}
                                                                        </el-descriptions-item>
                                                                        <el-descriptions-item v-if="utils.useOptionChain(userChange, 'change.phone[0]')"
                                                                            label="手机号：">
                                                                            {{ userChange.change.phone[1] }}
                                                                        </el-descriptions-item>

                                                                        <el-descriptions-item v-if="utils.useOptionChain(userChange, 'change.gender[0]')"
                                                                            label="变更前">
                                                                            {{ userChange.change.gender[0] | typeGender }}
                                                                        </el-descriptions-item>
                                                                        <el-descriptions-item v-if="utils.useOptionChain(userChange, 'change.gender[0]')"
                                                                            label="性别：">
                                                                            {{ userChange.change.gender[1] | typeGender }}
                                                                        </el-descriptions-item> -->
                                </el-descriptions>
                            </div>
                            <el-empty v-else description="没有变更记录"></el-empty>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="isShowBiangeng = false">返回</el-button>
                            </span>
                        </el-dialog>
                    </el-form>
                </div>
                <div class="big-box">
                    <el-descriptions title="详细资料" :labelStyle="{ width: '60px' }" class="details-material" :column="2">
                        <el-descriptions-item v-if="vipInfo.store" label="门店">{{
                            vipInfo.store.title
                        }}</el-descriptions-item>
                        <el-descriptions-item label="会员编号">{{ vipInfo.id }}</el-descriptions-item>
                        <el-descriptions-item label="会员卡号">{{ vipInfo.vip_no }}</el-descriptions-item>
                        <el-descriptions-item label="生日">{{ vipInfo.birthday }}</el-descriptions-item>
                        <el-descriptions-item label="年龄">{{ getAges(vipInfo.birthday) }}</el-descriptions-item>
                        <el-descriptions-item label="开卡日期">
                            <template v-if="vipInfo.vip_time">
                                {{ $moment(vipInfo.vip_time * 1000).format('YYYY-MM-DD') }}
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" label="会员地址">
                            {{ vipInfo.address_info }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" :contentStyle="{ flex: '1' }" :labelStyle="{ display: 'none' }">
                            <div class="flex">
                                <div class="flex1">
                                    <span class="el-descriptions-item__label has-colon">头围</span>
                                    <span class="el-descriptions-item__content">{{ vipInfo.header }}</span>
                                </div>
                                <div class="flex1">
                                    <span class="el-descriptions-item__label has-colon">前后</span>
                                    <span class="el-descriptions-item__content">{{ vipInfo.around }}</span>
                                </div>
                                <div class="flex1">
                                    <span class="el-descriptions-item__label has-colon">左右</span>
                                    <span class="el-descriptions-item__content">{{ vipInfo.about }}</span>
                                </div>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="客户来源">{{ vipInfo.source | sourceTxt }}</el-descriptions-item>
                        <el-descriptions-item label="推荐人"> <span v-if="vipInfo.source == 1 || vipInfo.source == 2">{{
                            referrer
                        }}</span> </el-descriptions-item>
                        <el-descriptions-item label="兴趣爱好" :span="3"> {{ vipInfo.user_like }} </el-descriptions-item>
                        <el-descriptions-item label="转介绍" :span="2">
                            {{ vipInfo.child_count }}
                            <span class="tab-table-text vs-m-l-30" @click="getChild">详情</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="备注" :span="2">
                            {{ vipInfo.remarks }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <div class="grid-content bg-purple-light flex1">
                <div class="vs-table-box">
                    <el-tabs v-model="active" @tab-click="handleClick">
                        <el-tab-pane label="消费记录" name="0"> </el-tab-pane>
                        <el-tab-pane label="积分记录" name="1"> </el-tab-pane>
                        <el-tab-pane label="充值记录" name="2"> </el-tab-pane>
                        <el-tab-pane label="赠送次数记录" name="3"> </el-tab-pane>
                    </el-tabs>
                    <div class="filtrate-table vs-m-t-20" v-if="active == 0 || active == 1 || active == 2">
                        <span>单据时间段：</span>
                        <el-date-picker @change="selectDate" v-model="date" type="daterange" value-format="yyyy-MM-dd"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" plain @click="serch()">搜索</el-button>
                        <el-button type="" plain @click="result()">重置</el-button>
                    </div>
                    <!-- 消费记录 -->
                    <el-table v-show="active == 0" v-loading="tableLoading" :data="tableData"
                        header-row-class-name="has-gutter-table" style="width: 100%" border max-height="500px">
                        <el-table-column prop="out_trade_no" label="订单编号" align="center"></el-table-column>
                        <el-table-column label="门店" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订单类型" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.status | orderStatus }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="名称" align="center" show-overflow-tooltip min-width="140">
                            <template slot-scope="scope">
                                <div v-if="scope.row.project && scope.row.project.length">
                                    {{ scope.row.project.map((v) => v.project_name).join(",") }}
                                </div>
                                <div v-if="scope.row.goods && scope.row.goods.length">
                                    <!-- {{ scope.row.goods.map(v => v.goods_name).join(",") }} -->
                                    <div v-for="item in scope.row.goods" :key="item.id">
                                        {{ utils.productNameFiltering(item) }}
                                    </div>
                                </div>
                                <span>{{ scope.row.orders_title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="paid_amount" label="金额" align="center">
                            <template slot-scope="scope">
                                <!-- 如果状态是退款的话显示退款总金额 -->
                                <span v-if="scope.row.status == 5">{{ scope.row.return_price }}</span>
                                <span v-else>{{ scope.row.paid_amount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="staff.name" label="服务员工" align="center"></el-table-column>
                        <el-table-column prop="create_time" label="时间" align="center"></el-table-column>
                        <el-table-column fixed="right" width="110" label="操作" align="center">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row)" class="tab-table-text">查看账单</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 积分记录 -->
                    <el-table v-show="active == 1" v-loading="tableLoading" :data="tableData"
                        header-row-class-name="has-gutter-table" style="width: 100%" border max-height="500px">
                        <el-table-column label="门店" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交易时间" align="center" prop="create_time"></el-table-column>
                        <el-table-column label="交易类型" align="center">
                            <template slot-scope="scope">
                                <span>
                                    {{ scope.row.type | typeTxt }}
                                    <span v-if="scope.row.consumer && scope.row.type == 6">({{
                                        scope.row.consumer.realname || scope.row.consumer.username
                                    }})</span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="积分" align="center">
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.points_type == 1 ? "+" : "-"
                                }}{{ scope.row.number }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="剩余积分" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.surplus }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="操作人" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.staff">{{ scope.row.staff.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="out_trade_no" label="业务号" align="center"></el-table-column>
                    </el-table>

                    <!-- 充值记录 -->
                    <el-table v-show="active == 2" v-loading="tableLoading" :data="tableData"
                        header-row-class-name="has-gutter-table" style="width: 100%" border max-height="500px">
                        <el-table-column label="门店" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="create_time" label="时间" align="center"></el-table-column>
                        <el-table-column prop="price" label="充值金额" align="center"></el-table-column>
                        <el-table-column prop="" label="充值方式" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.pay_type | pay_type }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="out_trade_no" label="业务号" align="center"></el-table-column>
                        <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip
                            align="center"></el-table-column>
                    </el-table>

                    <!-- 赠送记录 -->
                    <el-table v-show="active == 3" v-loading="tableLoading" :data="tableData"
                        header-row-class-name="has-gutter-table" style="width: 100%" max-height="500px">
                        <el-table-column prop="out_trade_no" label="门店" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="create_time" label="时间" align="center" width="160"></el-table-column>
                        <el-table-column prop="count" label="赠送服务次数" min-width="100" align="center"></el-table-column>
                        <el-table-column prop="out_trade_no" label="操作类型" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.type | giveType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" width="140" label="操作" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.is_consume == 1" @click="setRow(1, scope.row)"
                                    class="tab-table-text">查看账单</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="vs-paging-box">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="form.page" :page-size="form.limit"
                            layout="total,prev, pager,sizes, next, jumper" :total="form.total">
                        </el-pagination>
                    </div>
                </div>
                <div class="vs-leab-box">
                    <div class="vs-top-box">
                        <span style="margin-left: 22px">回访记录</span>
                    </div>
                    <div class="vs-bord-box">
                        <div class="flex jc-e">
                            <el-button @click="isShowGenjin = true; more = { date: '', content: '', }" type="primary"
                                class="vs-right-btns">回访</el-button>
                        </div>
                        <div v-for="(item, index) in returnVisit" :key="index" class="follow-up">
                            <div class="date-user">
                                <span v-if="item">跟进时间：{{ item.date }}</span>
                                <span class="vs-m-l-60" style="margin-left: 10px">{{ item.staff.name }}({{
                                    utils.useOptionChain($store, "state.user.userInfo.store.title") }})</span>
                                <span class="edit" v-if="!item.isEditReturn" @click="editReturn(item)">编辑 </span>
                                <span class="edit" v-else @click="editVisit(item)">保存 </span>
                            </div>
                            <el-input type="textarea" :rows="4" v-model="item.content"
                                :readonly="!item.isEditReturn"></el-input>
                        </div>
                        <el-empty class="vs-p-0" v-if="!returnVisit.length" :image-size="100"
                            description="暂无跟进记录"></el-empty>
                        <div class="vs-paging-box vs-p-20">
                            <!-- hide-on-single-page -->
                            <el-pagination @current-change="handleCurrentChange2" :current-page.sync="visit.page"
                                :page-size="visit.limit" layout="prev, pager, next, jumper" :total="visit.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog title="转介绍记录" :visible.sync="isIntroduce" width="400px">
                <el-table v-loading="loading2" :data="introduceList">
                    <el-table-column prop="create_time" label="时间"></el-table-column>
                    <el-table-column prop="realname" label="转介绍会员"></el-table-column>
                </el-table>
            </el-dialog>
            <el-dialog title="修改会员" :visible.sync="isUser" width="680px" :close-on-click-modal="false">
                <el-form :model="userform" inline :rules="rules" label-width="110px" ref="userform">
                    <el-form-item label="姓名" prop="realname">
                        <el-input style="width: 200px" v-model="userform.realname" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-select style="width: 200px" v-model="userform.gender" placeholder="请选择">
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input style="width: 200px" v-model="userform.phone" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker style="width: 200px" v-model="userform.birthday" align="right"
                            value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="会员地址" prop="value">
                        <el-cascader :props="props" filterable class="vs-w-200" ref="regionDom" @change="chioseAddress"
                            v-model="userform.value" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="详情地址" prop="address">
                        <el-input style="width: 200px" v-model="userform.address" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="会员卡号" prop="vip_no">
                        <el-input style="width: 200px" v-model="userform.vip_no" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="会员等级" prop="vip_id">
                        <el-select style="width: 200px" v-model="userform.vip_id" placeholder="请选择">
                            <el-option v-for="item in vipList" :key="item.id" :label="item.title"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="会员来源">
                        <!-- <el-input style="width: 200px" :value="utils.sourceTxt(userform.source)" readonly placeholder=""></el-input> -->
                        <el-select class="vs-w-200" v-model="userform.source" placeholder="" @change="selectSource">
                            <el-option label="老客户推荐" :value="2"></el-option>
                            <el-option label="顾客来店" :value="3"></el-option>
                            <el-option label="小程序" :value="5"></el-option>
                            <el-option label="抖音" :value="6"></el-option>
                            <el-option label="美团" :value="7"></el-option>
                            <el-option label="其他" :value="4"></el-option>
                            <el-option label="老系统数据" :value="8"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="推荐人">
                                                            <el-input style="width: 200px" :value="referrer" readonly placeholder=""></el-input>
                                                        </el-form-item> -->
                    <el-form-item label="推荐人" v-if="userform.source == 2">
                        <p style="width:200px" class="referrer" :class="referrer ? 'isUser' : ''"
                            @click="dialogTableVisible = true">
                            {{ referrer || "请选择" }}
                        </p>
                    </el-form-item>
                    <el-form-item label="头围" prop="header">
                        <el-input style="width: 200px" v-model="userform.header" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="前后" prop="around">
                        <el-input style="width: 200px" v-model="userform.around" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="左右" prop="about">
                        <el-input style="width: 200px" v-model="userform.about" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="兴趣爱好：" prop="user_like ">
                        <el-input v-model="userform.user_like" style="width: 200px" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks" class="vs-form-item-100">
                        <el-input v-model="userform.remarks" :rows="4" type="textarea" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="isUser = false">取 消</el-button>
                    <el-button :loading="isBtn" type="primary" @click="setUser">确 定</el-button>
                </span>
                <!-- 选择推荐人 -->
                <recommender v-model="dialogTableVisible" @confirm="confirmUser"></recommender>
            </el-dialog>
            <!-- <el-dialog
                                    				title="会员跟进提醒"
                                    				:visible.sync="isShowGenjin"
                                    				width="30%"
                                    				center
                                    			>
                                    				<span class="Genjin">姓名：{{ name }}</span>
                                    				<span>手机号：{{ phone }}</span>
                                    				<div class="Genjin-v">
                                    					<span>上次跟进时间：{{ time }}</span>
                                    				</div>
                                    				<span slot="footer" class="dialog-footer">
                                    					<el-button @click="isShowGenjin = false">取 消</el-button>
                                    					<el-button type="primary" @click="isShowGenjin = false"
                                    						>去跟进</el-button
                                    					>
                                    				</span>
                                    			</el-dialog> -->
            <el-dialog title="跟进" :visible.sync="isShowGenjin" width="400px">
                <div class="dialog_body">
                    <el-input type="textarea" v-model="more.content" placeholder="请输入跟进记录"></el-input>
                    <div>
                        下一次跟进提醒
                        <el-date-picker v-model="more.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                            style="margin-left: 25px">
                        </el-date-picker>
                    </div>
                </div>
                <div slot="footer" style="margin-top: 20px">
                    <el-button @click="isShowGenjin = false">取 消</el-button>
                    <el-button type="primary" @click="more.id ? editVisit(more) : rtVisit(more)">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <router-view></router-view>
</div>
</template>

<script>









import Recommender from '@/components/Recommender.vue';
export default {
    components: { Recommender },
    data() {
        return {
            name: "",
            time: "",
            num: "",
            phone: "",
            desc: "",
            more: {
                date: "",
                content: "",
            },
            timer: "",
            isUser: false,
            isBtn: false,
            dialogTableVisible: false,
            isShowGenjin: false, //跟进弹框是否展示
            isShowTuita: false, //退卡弹窗是否显示
            isShowCishu: false, //赠送服务次数弹窗是否显示
            isShowXiangq: false, //详情弹窗是否显示
            isShowBiangeng: false, //变更记录弹窗是否显示
            loading: false,
            tableLoading: false,
            loading2: false,
            isIntroduce: false,
            dialogVisible: false,
            introduceList: [],
            form: {
                user_id: "",
                start_time: "",
                end_time: "",
                limit: 20,
                page: 1,
                total: 0,
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            userform: {
                realname: "", //姓名
                phone: "", //手机号
                gender: "", //性别 1 男 2 女
                birthday: "", //生日
                vip_id: "", //会员等级
                vip_no: '',//会员卡号 编辑不传这个字段
                address: "", //用户地址
                source: '',//来源1朋友推荐 2老顾客推荐 3顾客来店 4其他 5：小程序 编辑不传这个字段
                pid: '',//推荐人id 用户来源为朋友推荐或老顾客推荐才有 编辑不传这个字段
                remarks: "", //备注
                header: "", //头围
                around: "", //前后
                about: "", //左右
                store_id: "", //门店
                province_id: "", //省
                city_id: "", //城市
                area_id: "", //区/县
                user_like: "",//兴趣爱好
                value: "",
                town_id: '',
            },
            referrer: "", //推荐人
            props: {
                lazy: true,
                lazyLoad: async (node, resolve) => {
                    const { value } = node;
                    console.log(node, 'node');
                    let { code, data = [] } = await this.$Http.tree({ pid: value });
                    data.forEach(v => {
                        v.label = v.area_name;
                        v.value = v.id;
                        v.leaf = v.level >= 5
                    })
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                    resolve(data);
                }
            },
            rules: {
                realname: { required: true, message: "请输入姓名", trigger: "blur" },
                phone: { required: true, message: "请输入手机号", trigger: "blur" },
                gender: { required: true, message: "请选择性别", trigger: "change" },
                birthday: { required: true, message: "请选择生日", trigger: "change" },
                vip_no: { required: true, message: "请输入会员卡号", trigger: "blur" },
                pid: { required: true, message: '请选择推荐人', trigger: 'change' },
                vip_id: {
                    required: true,
                    message: "请选择会员等级",
                    trigger: "change",
                },
                address: {
                    required: true,
                    message: "请输入用户详细地址",
                    trigger: "blur",
                },
                header: { required: true, message: "请输入头围", trigger: "blur" },
                around: { required: true, message: "请输入前后", trigger: "blur" },
                about: { required: true, message: "请输入左右", trigger: "blur" },
                store_id: { required: true, message: "请选择门店", trigger: "change" },
                value: {
                    required: true,
                    message: "请选择会员地址",
                    trigger: "change",
                },
            },
            isChange: false,
            userChange: {},
            date: "", //消费记录时间
            tableData: [],
            storeList: [], //门店列表
            vipList: [], //会员等级
            active: 0,
            vipInfo: {}, //会员详情
            referrer: "", //推荐人
            id: "",
            returnVisit: [],
            visit: {
                user_id: "", //
                page: 1,
                limit: 5,
                total: 0,
            },
            service_number: "",
            region: [],
        };
    },
    filters: {
        typeTxt(val) {
            switch (val) {
                case 1:
                    val = "消费";
                    break;
                case 2:
                    val = "积分换购";
                    break;
                case 3:
                    val = "转介绍";
                    break;
                case 4:
                    val = "手动充值";
                    break;
                case 5:
                    val = "扣减";
                    break;
                case 6:
                    val = "好友消费";
                    break;
                case 7:
                    val = "积分退回";
                    break;
            }
            return val;
        },
        pay_type(val) {
            switch (val) {
                case 1:
                    val = "微信支付";
                    break;
                case 2:
                    val = "支付宝支付";
                    break;
                case 3:
                    val = "银行卡";
                    break;
                case 4:
                    val = "现金";
                    break;
                case 5:
                    val = "余额";
                    break;
                case 6:
                    val = "赠送次数抵扣";
                    break;
            }
            return val;
        },
    },
    async created() {
        this.loading = true;
        await this.getAddressList();
        let id = this.$route.query.id;
        this.id = id;
        this.form.user_id = id;
        this.visit.user_id = id * 1;
        await this.getUserInfo(id);
        this.loading = false;
        //   获取消费记录
        this.handleClick();
        this.getVip();
        // this.getStore();  //获取所有门店
        this.getVisit_user();
    },
    methods: {
        confirmUser({ id, realname }) {
            this.userform.pid = id;
            this.referrer = realname;
            this.$refs.userform.clearValidate("pid")
        },
        // 选择来源  选择朋友或者老顾客推荐才有推荐人
        selectSource(ele) {
            if (ele == 3 || ele == 4 || ele == 5) {
                this.userform.pid = "";
                this.referrer = "";
            }
        },
        // 编辑回访
        async editReturn(val) {
            // val.isEditReturn = true;
            this.isShowGenjin = true;
            this.more = Object.assign({}, val);
        },
        async editVisit(val) {
            if (!val.date) return this.$message.error("请选择跟进日期");
            if (!val.content) return this.$message.error("请输入回访内容");
            let { code, data } = await this.$Http.editVisit({
                id: val.id,
                date: val.date,
                content: val.content,
            });
            if (code) {
                this.isShowGenjin = false;
                this.getVisit_user();
                this.$message.success("编辑成功");
            }
        },
        // 获取地址列表
        async getAddressList() {
            let { code, data } = await this.$Http.tree();
            if (code) {
                this.region = this.asd(data || []);
                console.log(this.region, "this.region");
            }
        },
        asd(list) {
            //遍历
            return list.map((v, i) => {
                v.label = v.area_name;
                v.value = v.id;
                if (v.child) {
                    v.children = this.asd(v.child);
                    delete v.child;
                }
                return v;
            });
        },
        chioseAddress(e) {
            console.log(e);
            this.userform.province_id = e[0];
            this.userform.city_id = e[1];
            this.userform.area_id = e[2];
            this.userform.town_id = e[3];
        },
        //跟进回访
        async rtVisit() {
            let obj = this.more;
            if (!obj.date) return this.$message.error("请选择跟进日期");
            if (!obj.content) return this.$message.error("请输入回访内容");
            let { code, data } = await this.$Http.setVisit({
                ids: this.id,
                ...obj
            });
            if (code === 10000) {
                this.$message.success("新增回访成功");
                this.isShowGenjin = false;
                this.more = {
                    date: "",
                    content: "",
                }
                this.getVisit_user();
            }
        },
        getAges(str) {
            let Str = str || "";
            let r = Str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if (r == null) return false;
            let d = new Date(r[1], r[3] - 1, r[4]);
            if (
                d.getFullYear() == r[1] &&
                d.getMonth() + 1 == r[3] &&
                d.getDate() == r[4]
            ) {
                let Y = new Date().getFullYear();
                return Y - r[1] + "   周岁";
            }

            return "";
        },
        async getVisit_user() {
            let { code, data } = await this.$Http.getVisitOne(this.visit);
            if (code) {
                data.data.forEach((ele) => {
                    ele.isEditReturn = false;
                });
                this.returnVisit = data.data;
                this.visit.total = data.total;
            }
        },
        handleCurrentChange2(val) {
            this.visit.page = val;
            this.getVisit_user();
        },
        clickSetUser() {
            this.isUser = true;
            this.userform = Object.assign({}, this.vipInfo);
            this.userform.value = [
                this.vipInfo.province_id,
                this.vipInfo.city_id,
                this.vipInfo.area_id,
                this.vipInfo.town_id,
            ];
        },
        setUser() {
            this.$refs.userform.validate(async (valid) => {
                if (!valid) return;
                let obj = Object.assign({}, this.userform);
                // delete obj.vip_no;
                if (obj.source != 2) {
                    obj.pid = "";
                }
                this.isBtn = true;
                let { code, data } = await this.$Http.setUser(obj);
                this.isBtn = false;
                if (code) {
                    this.isUser = false;
                    this.$message.success("修改成功");
                    this.getUserInfo(obj.id);
                }
            });
        },
        // 获取所有门店
        async getStore() {
            let { code, data } = await this.$Http.getStore({ is_all: 1 });
            if (code) {
                this.storeList = data;
            }
        },
        // 获取所有vip等级
        async getVip() {
            let { code, data } = await this.$Http.getVip({ is_all: 1 });
            if (code) {
                this.vipList = data;
            }
        },
        async getChild() {
            this.loading2 = true;
            let { code, data } = await this.$Http.getChild({ id: this.id });
            this.loading2 = false;
            if (code) {
                console.log(data);
                this.isIntroduce = true;
                this.introduceList = data.child;
            }
        },
        //赠送次数
        async giveNumber() {
            this.isBtn = true;
            let { code, data } = await this.$Http.setServiceCount({
                user_id: this.id,
                count: this.service_number,
            });
            this.isBtn = false;
            if (code) {
                this.service_number = 1
                this.$message.success("赠送成功");
                this.isShowCishu = false;
                this.getUserInfo(this.id);
            }
        },
        selectDate(e) {
            this.form.start_time = e?.[0];
            this.form.end_time = e?.[1];
        },
        //   获取会员详情
        async getUserInfo(id) {
            let { code, data } = await this.$Http.getUser({ id: id });
            if (data.pid) {
                await this.getReferrer(data.pid);
            }
            if (data.birthday == '0000-00-00') data.birthday = null;
            this.vipInfo = data;
        },
        //获取推荐人
        async getReferrer(id) {
            let { code, data } = await this.$Http.getUser({ id: id });
            this.referrer = data.realname;
        },

        // 搜索
        serch() {
            this.handleClick();
        },
        //重置
        result() {
            this.form.start_time = "";
            this.form.end_time = "";
            this.handleClick();
        },
        async handleClick(tab, event) {
            this.form.user_id = this.id;
            let obj = Object.assign({}, this.form);
            this.tableLoading = true;
            if (this.active == 0) {
                //   消费记录
                obj.create_time = obj.start_time;
                let { code, data } = await this.$Http.getOrders(obj);
                this.tableData = data.data;
                this.form.total = data.total;
            } else if (this.active == 1) {
                //   积分记录
                let { code, data } = await this.$Http.getIntegral(obj);
                this.tableData = data.data;
                this.form.total = data.total;
            } else if (this.active == 2) {
                //   充值纪律
                let { code, data } = await this.$Http.getUserRecharge(obj);
                this.tableData = data.data;
                this.form.total = data.total;
            } else if (this.active == 3) {
                //   赠送次数纪律
                let { code, data } = await this.$Http.getServiceCount({
                    user_id: this.id,
                });
                this.tableData = data.data;
                this.form.total = data.total;
                console.log(
                    "🚀 ~ file: memberInfo.vue ~ line 1059 ~ handleClick ~ this.tableData",
                    data
                );
            }
            this.tableLoading = false;
        },
        openInfo() {
            this.$prompt("请输入核验码", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /^\d+$/,
                inputErrorMessage: "核验码格式不正确",
                beforeClose: async (action, instance, done) => {
                    if (action === "confirm") {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = "执行中...";
                        let { code, data } = await this.$Http.checkOrder({
                            check_code: instance.inputValue,
                        });
                        if (code) {
                            this.$message.success("提交成功!");
                            this.handleCurrentChange(1);
                        }
                        done();
                        instance.confirmButtonLoading = false;
                    } else {
                        done();
                    }
                },
            })
                .then(({ value }) => { })
                .catch(() => { });
        },
        async setRow(type, row) {
            if (type == 1) {
                //   查看账单  title=订单详情&type=2&
                this.utils.goUrl("/orderInfo?id=" + (row.orders_id || row.id));
            } else if (type == 2) {
                this.$prompt("原因：", "是否确认取消订单？", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputType: "textarea",
                })
                    .then(({ value }) => {
                        this.$message({
                            type: "success",
                            message: "你的邮箱是: " + value,
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消输入",
                        });
                    });
            }
        },
        // 会员退卡
        async returnCard() {
            this.isBtn = true;
            let { code, data } = await this.$Http.returnVip({ user_id: this.id });
            this.isBtn = false;
            if (code) {
                this.isShowTuita = false;
                this.utils.backPage();
                this.$message.success("退卡成功");
            }
        },
        async getSaveLog() {
            //查询最近的会员信息变更
            this.isShowBiangeng = true;
            let saveLog = this.vipInfo.saveLog;
            if (typeof saveLog == "string") {
                saveLog = JSON.parse(saveLog)
            }
            this.userChange = saveLog;
            // this.isChange = true;
            // let { code, data } = await this.$Http.getSaveLog({ id: this.id });
            // this.isChange = false;
            // if (code && data) {
            // 	this.userChange = data.data[0];
            //     this.userChange.change = JSON.parse(data.data[0].change)
            //     console.log( this.userChange.change)
            // }
        },
        handleSizeChange(val) {
            this.form.limit = val;
            this.handleClick();
        },
        handleCurrentChange(val) {
            this.form.page = val;
            this.handleClick();
        },
        handleClose(dom) {
            this.$refs["ruleForm"].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
    },
};
</script>

<style lang="scss" scoped>
.referrer {
    width: 300px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #c0c4cc;
    line-height: 40px;
    padding: 0 15px;
    margin: 0;
    cursor: pointer;
}

.isUser {
    color: #606266;
}

.follow-up {
    padding: 10px 20px;

    .date-user {
        padding: 10px 0;
        color: #6c6f74;
        font-size: 14px;
    }

    .edit {
        margin-left: 20px;
        color: #409eff;
        cursor: pointer;
    }
}

.vs-table-box {
    min-width: 500px;
    margin-top: 0px;
}

.class-body {
    ::v-deep {
        .el-descriptions-item__label {
            display: none;
        }

        .el-descriptions-item__content {
            flex: 1;
        }
    }
}

.details-material {
    ::v-deep {
        .el-descriptions-item__cell {
            padding-bottom: 12px;
            border-bottom: 1px solid #dbdbdb;
            padding-top: 10px;
        }
    }
}

.filtrate-table {
    display: flex;
    align-items: center;
    color: #303133;
    font-size: 14px;
    margin: 20px 0;

    span {
        margin-right: 10px;
    }

    .el-button {
        margin-left: 20px;
    }
}

::v-deep {
    .el-tabs__header {
        margin: 0 !important;
    }
}

.vs-details-box {
    width: 93%;
    min-height: 36px;
    margin-left: 20px;
    // position: Relative;
    // margin-top: 30px;
    border: 1px solid rgb(144, 147, 153);
    border-radius: 10px;

    .big-x {
        width: 100%;
        height: 100px;
        margin-top: 10px;
        display: flex;

        .tiltou {
            width: 40%;
            height: 80px;
            display: flex;

            .image-avatar {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;

                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50px;
                    object-fit: cover;
                }
            }

            .nsex {
                width: 100px;
                height: 80px;
                margin: 10px 30px 0 0;
                display: flex;
                flex-flow: column;
                text-align: center;

                // flex-wrap: wrap-reverse;
                .vip1 {
                    border: 1px solid rgb(144, 147, 153);
                    margin: 10px 0 0px 0px;
                    text-align: center;
                    background: rgb(242, 242, 242);
                }
            }
        }

        .userFuwu {
            width: 60%;
            height: 80px;
            display: flex;
            justify-content: space-between;
            word-break: break-all;
            font-size: 14px;

            .balance {
                width: 100px;
                height: 80px;
                display: flex;
                flex-direction: column;

                .mon {
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }

                .monk {
                    text-align: center;
                    height: 30px;
                }
            }
        }
    }

    .btn-m {
        width: 100%;

        .button-v {
            width: 100%;

            //   display: flex;
            //   justify-content: space-between;
            button {
                margin: 5px;
            }
        }
    }
}

.vs-leab-box {
    margin-top: 20px;

    .vs-top-box {
        height: 50px;
        background: rgb(215, 215, 215);
        // color: blue;
        line-height: 50px;
    }

    .vs-bord-box {
        width: 100%;
        min-height: 50px;
        background: rgb(255, 255, 255);

        .vs-right-btns {
            margin-right: 20px;
            margin-top: 10px;
        }

        .vs-right-form {
            margin-top: 10px;
            margin-left: 22px;
        }

        .vs-right-form2 {
            margin-top: 0px;
            margin-left: 22px;
        }
    }
}

.bg-purple {
    background: #ffffff;
    min-height: 36px;
    border: 1px solid rgb(144, 147, 153);
    border-radius: 50%;
    color: rgb(144, 147, 153);
    padding: 30px 0;
    min-width: 425px;
    max-width: 510px;
    margin-right: 20px;

    .big-box {
        width: 93%;
        min-height: 36px;
        margin-left: 20px;
        margin-top: 20px;

        // display: flex;
        // justify-content: space-between;
        .datum-one {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 20px;
            border-bottom: 1px solid rgb(144, 147, 153);

            .details {
                cursor: pointer;
            }
        }

        .remark {
            width: 100%;
            min-height: 36px;
        }
    }
}

.grid-content {
    // width: 95%;
    border-radius: 4px;
    min-height: 36px;
}

.bgContent {
    margin-top: 20px;
    border: 1px solid red;
}

.bianGeng {
    //   display: block;
    margin: 0 100px 0 70px;
    //   padding: 15px 100px 0 30px;
}

.Genjin {
    margin: 15px 100px 0 100px;
}

.eve {
    margin-top: 6px;
}

.evn {
    margin-top: 10px;
}

.Genjin-v {
    margin-left: 150px;
    margin-top: 20px;
}

.tuiKa {
    color: red;
    text-align: center;
}

.dialog_body {
    display: flex;
    flex-direction: column;
    text-align: left;

    >div:first-child {
        margin: 20px 0;
        display: flex;
        align-items: center;
    }
}
</style>